<template>
    <div>
        <div id="main" style="width:500px;height:500px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {

    data() {
        return {
            timedata: [],
            data:[]
        };
    },

    mounted() {
        this.getcolumn()
    },

    methods: {
        indexs() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: this.timedata
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.data,
                        type: 'bar'
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        getcolumn() {
            this.axios.get('column')
                .then(res => {
                    this.data = res.data.tlist
                    this.timedata = res.data.timelist
                    this.indexs()
                })
        }
    },
};
</script>

<style lang="scss" scoped>

</style>